<template>
  <div v-if="bannerlist.length!=0" class="swiperBox">
    <el-carousel ref="swiper" @change="swiperChange" height="428px" arrow="always" indicator-position="none">
      <el-carousel-item v-for="(item,index) in bannerlist" :key="index">
        <img class="banner-img" :src="item.pictureUrl" alt="">
      </el-carousel-item>
    </el-carousel>

    <div class="swiperFooter">
      <span>{{bannerlist[swiperIndex].newsTitle}}</span>
      <span class="footerRight">{{swiperIndex+1}}/{{bannerlist.length}}
        <span style="margin-left: 20px;">
          <!-- <i @click="$refs.swiper.prev()" class="el-icon-arrow-left"></i> -->
          <img class="arrow-l" @click="$refs.swiper.prev()" src="../assets/arrow-left.png" alt="">
        </span>
        <span>
          <img class="arrow-l" @click="$refs.swiper.next()" src="../assets/arrow-right.png" alt="">
          <!-- <i @click="$refs.swiper.next()" class="el-icon-arrow-right"></i> -->
        </span>
      </span>
      <!-- <span class="footerRight">{{swiperIndex+1}}/{{bannerlist.length}}<span><i @click="$refs.swiper.prev()"
            class="el-icon-arrow-left"></i></span><span><i @click="$refs.swiper.next()" class="el-icon-arrow-right"></i></span></span> -->
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      bannerlist: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        // bannerlist: [...new Array(5)],
        swiperIndex: 0
      }
    },
    methods: {
      swiperChange(e) {
        this.swiperIndex = e
      }
    }
  }
</script>

<style scoped="scoped">
  .swiperBox {
    position: relative;
  }

  .swiperFooter {
    position: absolute;
    z-index: 9;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 18px;
  }

  .swiperFooter>span:first-child {
    margin-left: 20px;
  }

  .footerRight {
    display: flex;
    align-items: center;
  }

  .footerRight>span {
    background-color: #106470;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* .footerRight>span:first-child {
    margin-left: 11px;
  }

  .footerRight i {
    font-size: 30px;
  }
 */

.arrow-l{
  width: 50px;
  height: 50px;
}
  .banner-img {
    width: 100%;
    height: 100%;
  }
</style>
